<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>业主管理</title>
    <script src="../js/vue3.js"></script>
    <script src="../js/axios-0.18.0.js"></script>
    <script src="../js/element-plus.js"></script>
    <script src="../js/icons-vue.js"></script>
    <script src="../js/zh-cn.js"></script>
    <link rel="stylesheet" href="../css/index.css"/>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background: linear-gradient(135deg, #f5f7fa 0%, #e4e8f0 100%);
            color: #333;
            min-height: 100vh;
            padding: 20px;
        }

        .container {
            max-width: 1400px;
            margin: 30px auto;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 6px 18px rgba(0, 0, 0, 0.1);
            overflow: hidden;
        }

        .header {
            background: linear-gradient(90deg, #409EFF 0%, #64b5ff 100%);
            color: white;
            padding: 20px 30px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .header h1 {
            font-size: 24px;
            font-weight: 600;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .header h1 i {
            font-size: 28px;
        }

        .actions {
            display: flex;
            gap: 15px;
            padding: 20px;
            background: #f9fbfd;
            border-bottom: 1px solid #ebeef5;
        }

        .search-container {
            padding: 20px;
            background: #f9fbfd;
            border-bottom: 1px solid #ebeef5;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }

        .table-container {
            padding: 0 20px 20px;
            overflow-x: auto;
        }

        .pagination-container {
            margin-top: 20px;
            display: flex;
            justify-content: flex-start;
            padding: 0 20px 20px;
        }

        .operation-buttons {
            display: flex;
            gap: 8px;
        }

        .custom-button {
            border-radius: 6px;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 6px;
        }

        .custom-table {
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
            min-width: 1000px;
        }

        .table-header {
            background: #f5f7fa;
            padding: 12px 16px;
            font-weight: 600;
            color: #606266;
        }

        .footer {
            text-align: center;
            padding: 20px;
            color: #909399;
            font-size: 14px;
            border-top: 1px solid #ebeef5;
            background: #f9fbfd;
        }

        .empty-state {
            text-align: center;
            padding: 40px;
            color: #909399;
        }

        .empty-state i {
            font-size: 60px;
            margin-bottom: 15px;
            color: #c0c4cc;
        }

        .empty-state p {
            margin-top: 10px;
        }

        .owner-id {
            font-weight: 600;
            color: #409EFF;
        }

        .gender-male {
            color: #409EFF;
        }

        .gender-female {
            color: #e91e63;
        }

        .id-card {
            font-family: monospace;
            letter-spacing: 1px;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="container">
        <div class="header">
            <h1><i class="fas fa-users"></i> 业主管理系统</h1>
            <div>欢迎，管理员</div>
        </div>

        <div class="actions">
            <el-button type="primary" class="custom-button" @click="handleAdd">
                <i class="fas fa-plus"></i> 新增业主
            </el-button>
            <el-button type="danger" class="custom-button"
                       @click="deleteBuildings">
                <i class="fas fa-trash-alt"></i> 批量删除
            </el-button>
        </div>

        <div class="search-container">
            <el-input
                    v-model="searchQuery"
                    @input="getOwner"
                    placeholder="请输入业主姓名进行查询"
                    style="width: 300px"
                    clearable
                    @clear="handleSearch"
                    @keyup.enter="handleSearch">
            </el-input>
        </div>

        <div class="table-container">
            <el-table
                    :data="owners"
                    style="width: 100%"
                    class="custom-table"
                    empty-text="暂无数据"
                    @selection-change="handleSelectionChange">
                <el-table-column type="selection" width="55"></el-table-column>
                <el-table-column label="编号" prop="id" sortable width="100">
                    <template #default="scope">
                        <span class="owner-id">{{ scope.row.id }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="姓名" prop="name" sortable min-width="120">

                </el-table-column>
                <el-table-column label="电话" prop="telphone" min-width="130">
                </el-table-column>
                <el-table-column label="性别" prop="gender" width="100">
                    <template #default="scope">
                        <el-tag v-if="scope.row.gender==1" class="ml-2" type="success">男</el-tag>
                        <el-tag v-else class="ml-2" type="warning">女</el-tag>

                    </template>
                </el-table-column>
                <el-table-column label="身份证号" prop="idcard" min-width="180"></el-table-column>
                <el-table-column label="备注" prop="remark" min-width="150"></el-table-column>
                <el-table-column label="操作" width="180" fixed="right">
                    <template #default="scope">
                        <div class="operation-buttons">
                            <el-button size="small" @click="handleEdit(scope.row)">
                                <i class="fas fa-edit"></i> 编辑
                            </el-button>
                            <el-button size="small" type="danger" @click="handleDelete(scope.row)">
                                <i class="fas fa-trash"></i> 删除
                            </el-button>
                        </div>
                    </template>
                </el-table-column>
            </el-table>

        </div>

        <div class="pagination-container">
            <el-pagination
                    v-model:current-page="currentPage"
                    v-model:page-size="pageSize"
                    :page-sizes="[5, 10, 20, 50]"
                    :total="total"
                    layout="total, sizes, prev, pager, next, jumper"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange">
            </el-pagination>
        </div>
        <div>
            <el-dialog
                    v-model="dialogVisible"
                    :title="isEdit ? '编辑个人信息' : '新增个人信息'"
                    width="600px"
                    :before-close="cancel">
                <div class="form-container">
                    <div class="form-title">
                        <i class="fas fa-user"></i> 基本信息
                    </div>

                    <el-form
                            :model="form"
                            :rules="rules"
                            ref="formRef"
                            label-width="80px"
                            label-position="right">
                        <div class="form-row">
                            <div class="form-col">
                                <el-form-item label="姓名" prop="name">
                                    <el-input
                                            v-model="form.name"
                                            placeholder="请输入姓名"
                                            clearable>
                                        <template #prefix>
                                            <i class="fas fa-signature"></i>
                                        </template>
                                    </el-input>
                                </el-form-item>
                            </div>

                            <el-form-item label="电话" prop="telphone">
                                <el-input
                                        v-model="form.telphone"
                                        placeholder="请输入手机号码"
                                        clearable
                                        maxlength="11">
                                    <template #prefix>
                                        <i class="fas fa-mobile-alt"></i>
                                    </template>
                                </el-input>
                            </el-form-item>

                            <div class="form-col">
                                <el-form-item label="性别" prop="gender">
                                    <el-radio-group v-model="form.gender">
                                        <el-radio label="男" :value="1"><i class="fas fa-mars"></i> 男</el-radio>
                                        <el-radio label="女" :value="2"><i class="fas fa-venus"></i> 女</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                            </div>
                        </div>


                        <el-form-item label="身份证号" prop="idcard">
                            <el-input
                                    v-model="form.idcard"
                                    placeholder="请输入身份证号码"
                                    clearable
                                    maxlength="18"
                                    class="id-card-input">
                                <template #prefix>
                                    <i class="fas fa-id-card"></i>
                                </template>
                            </el-input>
                        </el-form-item>

                        <el-form-item label="所属房间" prop="houseNo">
                            <el-select v-model="form.houseNo" type="textarea" placeholder="请选择所属房间"
                                       style="width: 100%">
                                <el-option v-for="h in houses" :label="h.houseNo" :value="h.id"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="备注" prop="remark">
                            <el-input
                                    v-model="form.remark"
                                    type="textarea"
                                    :rows="3"
                                    placeholder="请输入备注信息"
                                    maxlength="100"
                                    show-word-limit>
                            </el-input>
                        </el-form-item>
                    </el-form>
                </div>

                <template #footer>
                    <div class="dialog-footer">
                        <el-button @click="cancel">
                            <i class="fas fa-times"></i> 取消
                        </el-button>
                        <el-button type="primary" @click="onSubmit">
                            <i class="fas fa-check"></i> {{ isEdit ? '更新' : '确认' }}
                        </el-button>
                    </div>
                </template>
            </el-dialog>
        </div>
        <div class="footer">
            业主管理系统 © 2023 - 版权所有
        </div>
    </div>
</div>


<script>
    const {createApp, ref, computed, onMounted} = Vue;
    const {ElMessage, ElMessageBox} = ElementPlus;
    createApp({
        setup() {

            const owners = ref([]);
            const selectedOwners = ref([]);
            const searchQuery = ref('');
            const currentPage = ref(1);
            const pageSize = ref(4);
            const total = ref(0);
            const title = ref("新增/修改个人信息");
            const dialogVisible = ref(false);
            const form = ref({gender: "1"});
            const formRef = ref(null);
            const rules = ({
                name: [
                    {required: true, message: '请输入楼宇名', trigger: 'blur'},

                ],
                telphone: [
                    {
                        required: true, message: '请输入电话', trigger: 'blur',
                        // pattern: /^(?:13[0-9]|14[5-9]|15[0-3,5-9]|16[2,5-7]|17[0-8]|18[0-9]|19[1,3,5,8,9])\\d{8}$/,
                        message: '电话号格式不正确',
                        trigger: 'blur'
                    },
                ],
                gender: [
                    {required: true, message: '请输入备注', trigger: 'blur'},
                ],
                idcard: [

                    {
                        required: true, message: '请输入身份证号', trigger: 'blur',
                        // pattern: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/,
                        message: '身份证号不正确',
                        trigger: 'blur'
                    },
                ],
                houseNo: [
                    {required: true, message: '请输入房间号', trigger: 'blur'},
                ],
                remark: [
                    {required: true, message: '请输入备注', trigger: 'blur'},
                ],
            })

            const initSelect = () => {
                axios.get("/house/getHouseIdAnd").then(resp => {
                    houses.value = resp.data.data;
                })
            }
            // 初始化数据
            onMounted(() => {
                // 模拟API调用延迟
                initSelect();
                getOwner();
            });

            // 处理分页大小变化
            const handleSizeChange = (val) => {
                pageSize.value = val;
                getOwner();
            };

            // 处理当前页变化
            const handleCurrentChange = (val) => {
                currentPage.value = val;
                getOwner();
            };

            const getOwner = () => {
                let url = searchQuery.value === '' ? `/owner/${currentPage.value}/${pageSize.value}` :
                    `/owner/${currentPage.value}/${pageSize.value}/${searchQuery.value}`
                axios.get(url).then(resp => {
                    //将返回searchQuery.value回来的集合数据赋值给表格绑定的数据源变量
                    //   resp.data   Result(obj:自己的集合数据)
                    console.log(resp.data)
                    owners.value = resp.data.data.data;
                    total.value = resp.data.data.total;
                }).catch(error => {
                    console.log(error);
                    console.log("网络繁忙，请稍后再试")
                })

            }
            // 处理选择变化
            // const handleSelectionChange = (selection) => {
            //     selectedOwners.value = selection;
            // };

            // 处理搜索
            const handleSearch = () => {
                currentPage.value = 1;
            };

            // 处理新增
            const houses = ref([]);
            const handleAdd = () => {
                dialogVisible.value = true;

            };
            const onSubmit = () => {
                if (formRef.value.validate(valid => {
                    if (valid) {
                        if (form.value.id) {
                            // 修改路线
                            updateOwner();
                        } else {
                            // 新增路线
                            axios.post("/owner", form.value).then(resp => {
                                if (resp.data.code === 200) {
                                    console.log(resp.data)
                                    data(resp.data.msg);
                                }
                            }).catch(error => {
                                ElMessage.error(error.response.data.msg);
                            })
                        }
                    }
                })) ;
            }
            const data=(msg)=>{
                ElMessage.success(msg);
                getOwner();
                form.value = {}
                dialogVisible.value = false
            }
            // 处理编辑
            const handleEdit = (row) => {
                axios.get(`/owner/getOwnerById/${row.id}`)
                    .then(resp => {
                        form.value = resp.data.data;
                        dialogVisible.value = true; // 显示弹窗
                        title.value = ref("修改业主")
                    })
                    .catch(error => {
                        ElMessage.error(error.response.data.msg);
                    })
            }

            // 处理修改
            const updateOwner = () => {
                axios.put("/owner", form.value).then(resp => {
                    // 判断resp.data 是否大于1，如果大于1 则修改成功，刷新页面，关闭弹窗
                    if (resp.data.code === 200) {
                      data(resp.data.msg);
                    } else {
                        ElMessage.error(error.response.data.msg)
                    }
                })
            }


            const ids2 = ref([]);
            const handleSelectionChange = (val) => {
                ids2.value = val.map(item => item.id)
            }
            const deleteBuildings = () => {
                ElMessageBox.confirm(
                    'proxy will permanently delete the file. Continue?',
                    'Warning',
                    {
                        confirmButtonText: 'OK',
                        cancelButtonText: 'Cancel',
                        type: 'warning',
                    }
                )
                    .then(() => {
                        axios.post("/owner/deleteOwner", ids2.value)
                            .then(resp => {
                                // 判断resp.data 是否大于1，如果大于1 则修改成功，刷新页面，关闭弹窗
                                if (resp.data.code === 200) {
                                    console.log(resp.data)
                                    ElMessage.success(resp.data.msg)
                                    getOwner();
                                } else {
                                    ElMessage.error(error.response.data.msg)
                                }
                            })
                    }).catch(error => {
                    ElMessage.error(error.response.data.msg);
                })
                    .catch(() => {
                        ElMessage({
                            type: 'info',
                            message: 'Delete canceled',
                        })
                    })
            }


            // 处理删除
            const handleDelete = (row) => {
                ElMessageBox.confirm(`确定要删除用户吗？`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',

                }).then(() => {
                    // let mid = row.buildingId;
                    axios.delete(`/owner/${row.id}`).then(resp => {
                        if (resp.data.code === 200) {
                            ElMessage.success(resp.data.msg);
                            getOwner();
                        } else {
                            alert("删除失败")
                        }
                    }).catch(error => {
                        ElMessage.error(error.response.data.msg);
                    })
                })
                    .catch(() => {
                        ElMessage({
                            type: 'info',
                            message: '取消删除',
                        })
                    })
            }
            const clearValid = () => {
                if (formRef && formRef.value) {
                    formRef.value.resetFields();
                }
            }
            const cancel = () => {
                clearValid();
                form.value = {gender: "1"};
                dialogVisible.value = false
            };
            return {
                cancel,
                owners,
                selectedOwners,
                searchQuery,
                currentPage,
                pageSize,
                handleSelectionChange,
                handleSearch,
                handleAdd,
                handleEdit,
                handleDelete,
                handleSizeChange,
                handleCurrentChange,
                total,
                getOwner,
                deleteBuildings,
                dialogVisible,
                form,
                formRef,
                rules,
                title,
                onSubmit,
                updateOwner,
                houses
            };
        }
    }).use(ElementPlus).mount('#app');
</script>
</body>
</html>